<!doctype html>

<html>

<head>

	<meta charset="utf-8">

	<title>控制大小，控制旋转</title>

	<script type="text/javascript" src="jquery-1.11.0.min.js"></script>

	<script type="text/javascript" src="drag.js"></script>
	<script src="./touch-0.2.14.min.js"></script>
	<script src="./vconsole.min.js"></script>
	<script src="./html2canvas.min.js" type="text/javascript"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<style type="text/css">
		* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}

		span {
			display: flex;
			display: -webkit-flex;
			display: flex;
			-webkit-flex-direction: column;
			flex-direction: column;
			-webkit-align-items: center;
			align-items: center;
			-webkit-justify-content: center;
			justify-content: center;
			display: block;
			width: 160px;
			padding: 30px;
			position: absolute;
			left: 50%;
			top: 5%;
			margin-left: -50px;
			text-align: right;
			transform-origin: center;
			border: 1px solid #000;
		}

		em {
			display: inline-block;
			width: 60px;
			height: 60px;
			background: red;
		}

		span img {
			align-self: center;
			-webkkit-align-self: center;
			vertical-align: middle;
			width: 100%;
			cursor: move;
			border: 1px solid #CCCCCC;
			-webkit-box-shadow: 10px 10px 25px #ccc;
			-moz-box-shadow: 10px 10px 25px #ccc;
			box-shadow: 10px 10px 25px #ccc;
			transform-origin: center;
		}

		span i {
			height: 50px;
			width: 50px;
			background: green;
			display: inline-block;
		}

		/*#coor{right: auto;bottom: auto;top: 0;right: 0;}*/

		html,
		body {
			height: 100%;
			width: 100%;
		}

		body {
			background-color: #F3F3F3;
		}

		header {
			width: 95%;
			margin: 0 auto;
			height: 60%;
			background: #aaa;
		}

		.onechange em {
			position: absolute;
			top: 0;
			left: calc(50%-15px);
			display: inline-block;
			width: 30px;
			height: 30px;
			background: red;
		}

		.onechange i {
			position: absolute;
			right: 0;
			top: 0;
			display: inline-block;
			width: 30px;
			height: 30px;
			background: yellow;
		}

		.onechange b {
			position: absolute;
			top: 0;
			left: 0;
			display: inline-block;
			width: 30px;
			height: 30px;
			background: green;
		}

		.cc {
			background: green;
			height: 100px;
		}

		.cc img {
			background: black;
			width: 50px;
		}
	</style>

</head>



<body>
	<div class="cc">
		<img src="./dog.png" alt="">
	</div>
	<header>
		<span class="onechange">
			<b></b>
			<em></em>
			<i></i>
			<img src="./dog.png" alt="">
		</span>
		<span class="onechange">
			<b></b>
			<em></em>
			<i></i>
			<img src="./dog.png" alt="">
		</span>
	</header>
	<script type="text/javascript">
		var i = 0;
		var angle = 30;
		hhh = 0;
		touch.on('em', 'touchstart', function (ev) {
			ev.startRotate();
			hhh = 1;
			// ev.stopPropagation();
			ev.originEvent.preventDefault();
		});
		touch.on('.onechange b', 'tap', function (param) {
			$(this).parents('.onechange').remove();
		})
		touch.on('em', 'rotate', function (ev) {
			// ev.stopPropagation();
			var totalAngle = angle + ev.rotation;
			if (ev.fingerStatus === 'end') {
				hhh = 0;
				angle = angle + ev.rotation;
			};
			console.log($(this).siblings('img'));
			$(this).parent('.onechange').css({
				"webkitTransform": 'rotate(' + totalAngle + 'deg)'
			});
		});
		changeDrage("span", "i");
	</script>
	<script type="text/javascript">
	</script>


</html>